<template>
  <div class="index" >
    <div class="container">
      <div class="main">
        <img class="title" src="../common/images/poster_title1.png" alt=""
          v-if="tapeIndex === 0"
        >
        <img class="title" src="../common/images/poster_title2.png" alt=""
             v-if="tapeIndex === 1"
        >
        <img class="title" src="../common/images/poster_title3.png" alt=""
             v-if="tapeIndex === 2"
        >
        <img class="title" src="../common/images/poster_title4.png" alt=""
             v-if="tapeIndex === 3"
        >
        <div class="photo" :style="{backgroundImage: 'url(' + photoBase +')'}" @click="uploadFile">
          <!--<img :src="photoBase" alt="" v-if="photoBase">-->
          <input class="input-file" type="file" accept="image/jpg,image/jpeg,image/png" @change="doUpload">
        </div>
        <div class="radio man" @click="sexSelect(1)">
          <img src="../common/images/poster_radio_select.png" alt="" v-if="sex === 1">
          <img src="../common/images/poster_radio.png" alt="" v-if="sex === 2">
        </div>
        <div class="radio woman" @click="sexSelect(2)">
          <img src="../common/images/poster_radio_select.png" alt="" v-if="sex === 2">
          <img src="../common/images/poster_radio.png" alt="" v-if="sex === 1">
        </div>
        <div class="submit" @click="goCompose"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import lrz from 'lrz'

  export default {
    components: {
    },
    // mixins 混合
    mixins: [],
    data() {
      return {
        tapeIndex: false,
        sex: 1,
        photoBase: ''
      }
    },
    mounted() {
      this.tapeIndex = this.$route.query.tapeIndex
    },
    methods: {
      sexSelect(sex) {
        this.sex = sex
      },
      uploadFile() {
        $('.input-file').click()
      },
      doUpload(e) {
        let file = e.target.files[0]
        let options = {
          width: 200,
          quality: 0.6
        }
        let self = this

        lrz(file, options)
          .then(function (rst) {
            self.photoBase = rst.base64
            localStorage.setItem('photoBase', rst.base64)
          })
          .catch(function (err) {
            alert('压缩失败')
          })
          .always(function () {
            // 清空文件上传控件的值
            e.target.value = null
          })
      },
      goCompose() {
        this.$router.push({path: 'compose', query: {sex: this.sex, tapeIndex: this.tapeIndex}})
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../common/stylus/base.styl'
  .main
    width 100%
    height vw(1250)
    background url("../common/images/poster_bg.jpg")
    background-size 100% 100%
    overflow hidden
    .title
      width vw(555)
      display block
      margin vw(265) auto
    .radio
      width vw(150)
      position absolute
      top vw(1011)
      img
        width vw(37)
    .man
      left vw(187)
    .woman
      left vw(426)
    .photo
      width vw(540)
      height vw(542)
      position absolute
      top vw(350)
      left vw(105)
      border-radius vw(5)
      background-size 100%
      background-position center center
      img
        width 100%
        height 100%
      input
        opacity 0
    .submit
      width 100%
      height vw(95)
      position absolute
      top vw(1130)
</style>
